<template>
	<view>
		<view class="box">
			<view class="hd flex">
				<image class="icon-img" :src="icon" mode="aspectFit"></image>
				<view class="flex-1 title">
					{{title}}
				</view>
				<image v-if="add" class="icon-img ml20" src="/static/images/Add.png" mode="aspectFit" @click="bindAdd"></image>
				<image class="icon-img ml20" src="/static/images/Edit.png" mode="aspectFit" v-if="edit" @click="bindEdit"></image>
			</view>
			<u-line color="#DEE1E7" v-if="border"></u-line>
			<view class="bd">
				<slot></slot>
			</view>
		</view>
		<view class="blank30"></view>
			
	</view>
</template>

<script>
	export default {
		name: "item",
		props: {
			title:{
				type:String,
				default:''
			},
			icon:{
				type:String,
				default:''
			},
			add:{
				type:Boolean,
				default:false
			},
			edit:{
				type:Boolean,
				default:true
			},
			border:{
				type:Boolean,
				default:true
			},
		},
		computed: {

		},
		filters: {
			
		},
		data() {
			return {
				bid: '1'
			};
		},
		methods: {
			bindEdit(){
				this.$emit('edit')
			},
			bindAdd(){
				this.$emit('add')
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 0 40upx;
	}
	.hd {
		padding: 40upx 0;
	
		.title {
			font-family: DM Sans;
			font-size: 28upx;
			font-weight: 600;
			line-height: 40upx;
			text-transform: capitalize;
			color: #150B3D;
			padding-left: 20upx;
	
		}
	}
	
	.icon-img {
		display: inline-block;
		width: 48upx;
		height: 48upx;
		vertical-align: top;
	}

</style>